import React, { Component } from 'react';
import {Card,Button,Table,Form,Select,Modal,message} from 'antd';
import axios from 'axios';
import BaseForm from './../../components/BaseForm'
import ETable from './../../components/ETable'

const Option = Select.Option;
const FormItem = Form.Item;
export default class City extends Component {
    state={}
    componentWillMount() {
      this.requeList()
    }
    formList=[
        {
            type:"城市"
        },
        {
            type:'时间查询',
            placeholder:"请输入日期"
        }
    ]
      // 查询表单
      handleFilterSubmit = (filterParams) => {
        this.params = filterParams;
    };

    requeList = () => {
        axios.get("https://www.studyinghome.com/mock/5e4ca5d80167590746b7615d/example/table/city")
        .then(res => {
            let list = res.data.result.list
            this.setState({
                dataSource: res.data.result.list
            })
        })
    }
    handleOpenClick = () =>{
        this.setState({
            isShowOpenCity:true
        })
    }
    handleSubmit = () =>{
          //获取当前文本框的值 
        let cityInfo = this.cityForm.props.form.getFieldsValue();
        if(cityInfo.city_id=="1" || cityInfo.op_mode=="1"){
            message.success("请选择");
            return;
        }
        message.success("开通成功");
        this.setState({
            isShowOpenCity:false
        })
    }
    render() {
        const columns = [
            {
                title:'城市ID',
                dataIndex:'id'
            }, {
                title: '城市名称',
                dataIndex: 'name'
            }, {
                title: '用车模式',
                dataIndex: 'mode',
                render(mode){
                    return mode ==1 ?'停车点':'禁停区';
                }
            }, {
                title: '营运模式',
                dataIndex: 'op_mode',
                render(op_mode) {
                    return op_mode == 1 ? '自营' : '加盟';
                }
            }, {
                title: '授权加盟商',
                dataIndex: 'franchisee_name'
            }, {
                title: '城市管理员',
                dataIndex: 'city_admins',
               
            }, {
                title: '城市开通时间',
                dataIndex: 'open_time'
            }, {
                title: '操作时间',
                dataIndex: 'update_time',
               
            }, {
                title: '操作人',
                dataIndex: 'sys_user_name'
            }
        ]
        return (
            <div>
                <Card style={{marginBottom:"20px"}}>
                    {/* <FilterForm/> */}
                    <BaseForm formList={this.formList} filterSubmit={this.handleFilterSubmit}/>
                </Card>
                <Card>
                    <Button onClick={this.handleOpenClick} type="primary">开通城市</Button>
                </Card>
                <Table
                    columns={columns}
                    dataSource={this.state.dataSource}
                    bordered
                ></Table>
                <Modal 
                    title="开通城市"
                    visible={this.state.isShowOpenCity}
                    onOk={this.handleSubmit}
                    onCancel = {() => {
                        this.setState({
                            isShowOpenCity:false
                        })
                    }}
                >
                    <OptionCityForm
                        wrappedComponentRef={
                            (inst) =>(this.cityForm=inst)
                        }
                    />
                </Modal>
            </div>
        )
    }
}
class FilterForm extends Component{
    render() {
        const {getFieldDecorator}  = this.props.form
        return(
            <Form layout="inline">
                <FormItem label="城市" >
                    {
                        getFieldDecorator('city_id',{
                            initialValue:"1"
                        })(
                            <Select style={{width:120}}>
                                <Option value="1" >请选择城市</Option>
                                <Option value="2">哈尔滨</Option>
                                <Option value="3">北京</Option>
                                <Option value="4">上海</Option>
                            </Select>
                        )                            
                    }
                </FormItem>
                <FormItem label="用车模式">
                    {
                        getFieldDecorator('model',{
                            initialValue:"1"
                        })(
                            <Select style={{width:100}}>
                                <Option value="1" >全部</Option>
                                <Option value="2">指定停车模式</Option>
                                <Option value="3">禁停区模式</Option>   
                        </Select>
                        )
                    }
                </FormItem>
                <FormItem label="营运模式">
                    {
                        getFieldDecorator('op_mode',{
                            initialValue:'1'
                        })(
                            <Select  style={{width:100}}>
                              <Option value="1" >全部</Option>
                                <Option value="2">自营</Option>
                                <Option value="3">加盟</Option>   
                            </Select>
                        )
                    }
                </FormItem>
                <FormItem label="加盟授权状态">
                    {
                        getFieldDecorator('auth_status',{
                            initialValue:"1"
                        })(
                            <Select  style={{width:100}}>
                              <Option value="1" >全部</Option>
                                <Option value="2">已授权</Option>
                                <Option value="3">未授权</Option>   
                            </Select>
                        )
                    }
                </FormItem>
                <FormItem>
                    <Button type="primary" style={{margin:"0 20px"}}>查询</Button>
                    <Button type="primary" >重置</Button>
                </FormItem>
            </Form>
        )
    }
}
FilterForm = Form.create({})(FilterForm)
class OptionCityForm extends Component{
    render() {
        const { getFieldDecorator} = this.props.form;
        const formItemIabel = {
            labelCol:{span:4},
            wrapperCol:{span:12}
        }
        return(
            <Form layout="horizontal">
                <FormItem label="选择城市" {...formItemIabel}>
                    {
                        getFieldDecorator('city_id',{
                            initialValue:"1"
                        })(
                            <Select>
                                <Option value="1">全部</Option>
                                <Option value="2">秦皇岛</Option>
                                <Option value="3">天津</Option>
                            </Select>
                        )
                    }
                </FormItem>
                <FormItem label="营运模式" {...formItemIabel}>
                    {
                        getFieldDecorator("op_mode",{
                            initialValue:"1"
                        })(
                            <Select>
                                <Option value="1">请选择</Option>
                                <Option value="2">加盟</Option>
                                <Option value="3">自营</Option>
                            </Select>
                        )
                    }
                </FormItem>
            </Form>
        )
    }
}
OptionCityForm = Form.create({})(OptionCityForm)
